<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双图片列表</title>
    <style>
        .left {
            float: left;
        }
        
        .right {
            float: right;
        }
        
        #wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 700px;
            height: 300px;
            transform: translate(-50%, -50%);
        }
        
        img {
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>
    <button>上一组</button>
    <button>下一组</button>
    <span id="wrapper">
        <div class="left">
            <img src="./img/1.png" alt="">
            <p>1/4</p>
        </div>
        <div class="right">
            <img src="./img/1.png" alt="">
            <p>1/3</p>
        </div>
    </span>

    <script>
        var aDiv = document.getElementsByTagName('div');
        var aBtn = document.getElementsByTagName('button');
        var aImg = document.getElementsByTagName('img');
        var imgs = [
            ["./img/1.png", "./img/2.png", "./img/3.png", "./img/4.png"],
            ["./img/1.png", "./img/2.png", "./img/3.png"]
        ];
        var aP = document.getElementsByTagName('p');
        var i = 0;
        var j = 0;
        aImg[0].onclick = function() {
            i++;
            if (i > 3) {
                i = 0;
            }
            aImg[0].src = imgs[0][i];
            aP[0].innerHTML = i + 1 + '/4';
        }
        aImg[1].onclick = function() {
            j++;
            if (j > 2) {
                j = 0;
            }
            aImg[1].src = imgs[1][j];
            aP[1].innerHTML = j + 1 + '/3';
        }
        aBtn[0].onclick = function() {
            i--;
            if (i < 0) {
                i = 3;
            }
            aImg[0].src = imgs[0][i];
            aP[0].innerHTML = i + 1 + '/4';
            j--;
            if (j < 0) {
                j = 2;
            }
            aImg[1].src = imgs[1][j];
            aP[1].innerHTML = j + 1 + '/3';
        }
        aBtn[1].onclick = function() {
            aImg[0].onclick();
            aImg[1].onclick();
        }
    </script>
</body>

</html>